<template>
    <van-sticky>
        <van-nav-bar
            title="优惠列表"
            left-text="返回"
            left-arrow
            @click-left="OnBack"
        />
    </van-sticky>

    <div class="coupon_list">
        <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="OnLoad"
            >
                <div class="list">
                    <div class="coupon_item" v-for="(item,index) in list">
                        <div class="item_content">
                            <router-link :to="{path:'/coupon/info',query:{cid:item.id}}">
                                <div class="left">{{ item.rate * 100 }}<span>折</span></div>
                                <div class="right">
                                    <div>{{ item.title }}</div>
                                    <div>活动开始时间：{{ item.createtime_text }}</div>
                                    <div>活动结束时间：{{ item.endtime_text }}</div>
                                    <div>领取数量：{{ item.total }} 张 每人限领1张</div>
                                </div>
                            </router-link>
                        </div>
                        <div class="item_btn">
                            <van-button type="primary" class="right_btn" v-if="item.receive" @click="OnReceive(item.id,index)">领取</van-button>
                            <van-button type="danger" disabled class="right_btn" v-else>已领取</van-button>
                        </div>
                    </div>

                    <van-back-top :bottom="'80'" />
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

// 读取cookie存放的登录信息
const business = Object.getOwnPropertyNames(proxy.$business.value).length > 0 ? proxy.$business :  ref({});
// 存放数据
const list = ref([]);
// 刷新状态
const refreshing = ref(false);
// 懒加载状态
const loading = ref(false);
// 上拉加载状态
const finished = ref(false);
// 当前页
const page = ref(1);
// 数据总条数
const ListCount = ref(0);

const OnBack = () => proxy.$router.back(); 

// 下拉刷新
const OnRefresh = () => 
{
    finished.value = false;
    loading.value = true;
    list.value = [];
    page.value = 1;

    // 加载数据方法
    setTimeout(OnLoad,1500);
}

// 上拉加载
const OnLoad = async () =>
{
    // 如果等于true说明当前进行下拉刷新
    if(refreshing.value)
    {
        // 结束下拉刷新
        refreshing.value = false;
    }

    // 组装数据
    let params = {
        page:page.value,
        busid:business.value.id
    }

    // 发起请求
    let result = await proxy.$http.post({
        url:'/coupon/index',
        params
    })

    // 请求发送完毕后，加载状态也就完毕了
    loading.value = false;

    if(result.code === 1)
    {
        // 合并数组
        list.value = list.value.concat(result.data.list);
        ListCount.value = result.data.count;

        // 如果没有更多数据了，就说明已经加载到底了
        if(list.value.length === ListCount.value)
        {
            finished.value = true;

            return false;
        }

        page.value = page.value + 1;
    }else{
        finished.value = true;

        proxy.$fail(result.msg);

        return false
    }
}

const OnReceive = async (cid,index) =>
{
    if(Object.getOwnPropertyNames(business.value).length === 0 || business.value.hasOwnProperty('id') === false)
    {
        proxy.$confirm({
            title:'跳转登录提示',
            message:'是否确认跳转到登录？'
        }).then(() =>
        {
            proxy.$cookies.set('redirect',{path:'/coupon'});

            proxy.$router.push('/business/login');
            
        }).catch(() => {});

        return false;
    }

    // 封装请求数据
    let params = {
        cid,
        busid:business.value.id
    }

    // 发起请求
    let result = await proxy.$http.post({
        url:'/coupon/receive',
        params
    })

    if(result.code === 1)
    {
        proxy.$success({
            message:result.msg,
            onClose:() =>
            {
                list.value[index].receive = false;
            }
        })
    }else{
        proxy.$fail(result.msg);
    }
}


</script>

<style scoped>
@import url('/assets/css/CouponIndex.css');
</style>